<template>
  <view v-if="isLogined" class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="title">
        <view class="header-title">结核检测</view>
        <view class="header-subtitle">一键查询检测结果</view>
      </view>
      <image
        class="header-image"
        src="https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/doctor.png"
        mode="widthFix"
      />
    </view>

    <!-- 中间 -->
    <view class="main">
      <!-- 步骤展示 -->
      <view class="steps">
        <view class="step">
          <image class="step-icon" src="../../static/icons/step1.png" />
          <view class="step-text">
            <text class="step1">步骤一</text>
            <br />
            <text class="step2">上传图片</text>
          </view>
        </view>
        <view class="step">
          <image class="step-icon" src="../../static/icons/step2.png" />
          <view class="step-text">
            <text class="step1">步骤二</text>
            <br />
            <text class="step2">结果分析</text>
          </view>
        </view>
      </view>
      <view class="example">
        <image
          class="example-image"
          :src="
            imagePath ||
            'https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/example.png'
          "
          mode="aspectFill"
        ></image>
      </view>

      <!-- 上传区域 -->
      <view v-if="!imagePath" class="upload-area">
        <view class="upload-view" @click="takePhoto">
          <image class="upload-image" src="../../static/icons/upload1.png" mode="widthFix" />
          <text class="upload-txt">拍照上传</text>
        </view>
        <view class="upload-view" @click="chooseFromGallery">
          <image class="upload-image" src="../../static/icons/upload2.png" mode="widthFix" />
          <text class="upload-txt">图库上传</text>
        </view>
      </view>
      <view v-else class="upload-area">
        <view class="upload-view" @click="toDetect">
          <image class="upload-image" src="../../static/icons/scan.png" mode="widthFix" />
          <text class="upload-txt">开始检测</text>
        </view>
        <view class="upload-view" @click="backToChoose">
          <text class="upload-txt">重新选择</text>
        </view>
      </view>
    </view>
  </view>

  <view v-else class="container">
    <view class="login-container">
      <text class="login-text">请先登录...</text>
      <button class="login-button mt-8" @click="toLogin">前往登录</button>
    </view>
  </view>
</template>

<script setup>
import { getEvnBaseUploadUrl } from '@/utils'
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { useRecordStore } from '@/store/record'

const recordStore = useRecordStore()
const currentRecord = computed(() => recordStore.currentRecord)

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLogined = computed(() => userStore.isLogined)
const user_id = userInfo.value.id
const username = userInfo.value.username

const imagePath = ref('')

const VITE_UPLOAD_BASEURL = `${getEvnBaseUploadUrl()}`

// 拍照上传
const takePhoto = () => {
  // 显示加载框
  uni.showLoading({
    title: '上传中', // 提示信息
    mask: true, // 显示透明蒙层防止触摸穿透
  })
  uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: (res) => {
      imagePath.value = res.tempFilePaths[0]
      console.log(imagePath.value)
      // 隐藏加载框
      uni.hideLoading()
    },
    fail: (err) => {
      console.error('拍照上传失败：', err)
      uni.showToast({
        title: '拍照上传失败',
      })
    },
  })
}

// 从图库选择图片
const chooseFromGallery = () => {
  // 显示加载框
  uni.showLoading({
    title: '上传中', // 提示信息
    mask: true, // 显示透明蒙层防止触摸穿透
  })
  uni.chooseImage({
    count: 1,
    sourceType: ['album'],
    success: (res) => {
      imagePath.value = res.tempFilePaths[0]
      console.log(imagePath.value)
      // 隐藏加载框
      uni.hideLoading()
    },
    fail: (err) => {
      console.error('图库上传失败：', err)
      uni.showToast({
        title: '图库上传失败',
        icon: 'error',
      })
    },
  })
}

// 修改 toDetect 函数
const toDetect = () => {
  // 显示加载框
  uni.showLoading({
    title: '检测中', // 提示信息
    mask: true, // 显示透明蒙层防止触摸穿透
  })

  uni.uploadFile({
    url: VITE_UPLOAD_BASEURL,
    filePath: imagePath.value,
    name: 'image',
    formData: { username, user_id },
    success: (res) => {
      const parsedData = JSON.parse(res.data) // 将字符串解析为 JSON 对象
      console.log('uni.uploadFile success->', parsedData)
      // 隐藏加载框
      uni.hideLoading()
      uni.showToast({
        title: '检测完成',
        icon: 'success',
      })
      recordStore.getCurrentRecord(parsedData.id)
      uni.navigateTo({
        url: '/pages/record/detail',
      })
      imagePath.value = ''
    },
    fail: (err) => {
      console.error('uni.uploadFile err->', err)
      uni.showToast({
        title: '检测失败',
        icon: 'error',
      })
      error.value = true
    },
  })
}

const backToChoose = () => {
  imagePath.value = ''
}

const toLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  padding: 20px;
  background: linear-gradient(180deg, rgba(215, 229, 247, 1) 0%, rgba(217, 234, 251, 0) 100%);
}

.header {
  text-align: left;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  .title {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    .header-title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

    .header-subtitle {
      font-size: 16px;
      color: #666;
      margin-top: 5px;
    }
  }

  .header-image {
    margin-top: 10px;
    width: 50%;
  }
}

.main {
  background-color: #fff;
  border-radius: 12px;
  height: 80%;
}

.steps {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;

  .step {
    display: flex;
    margin-top: 5px;
    .step-icon {
      width: 50px;
      height: 50px;
      color: #007aff;
      margin-bottom: 8px;
    }

    .step-text {
      height: 50px;
      margin-left: 5px;
      font-size: 14px;
      color: #333;
      .step1 {
        font-size: 11px;
        color: #666;
        margin-bottom: 5px;
      }
      .step2 {
        font-weight: bold;
      }
    }
  }
}

.example {
  width: 100%;
  padding: 10px 30px;
  height: 60%;
  .example-image {
    width: 100%;
    height: 100%;
  }
}

.upload-area {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .upload-view {
    width: 200px;
    height: 45px;
    line-height: 40px;
    background-color: #007aff;
    border-radius: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    .upload-image {
      width: 25px;
      margin-right: 5px;
    }

    .upload-txt {
      color: #fff;
      font-size: 16px;
    }
  }
}

.login-container {
  margin: 200px auto;
  text-align: center;

  .login-text {
    font-size: 17px;
  }
  .login-button {
    width: 80%;
    background-color: #0075fe;
    border-radius: 12px;
    color: #eee;
    margin-top: 100px;
  }
}
</style>
